import 'dart:ui';
import 'package:earclean/app/config/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

Widget _getBarText(int index, bool isActive) {
  if (index == 0) {
    return Text("采耳",
        style: TextStyle(
            fontSize: 11,
            color:
                isActive ? ColorConfig.app_main : ColorConfig.subtitle_text));
  } else if (index == 1) {
    return Text("技师",
        style: TextStyle(
            fontSize: 11,
            color:
                isActive ? ColorConfig.app_main : ColorConfig.subtitle_text));
  } else if (index == 2) {
    return Text("健康服务",
        style: TextStyle(
            fontSize: 11,
            color:
                isActive ? ColorConfig.app_main : ColorConfig.subtitle_text));
  } else if (index == 3) {
    return Text("消息",
        style: TextStyle(
            fontSize: 11,
            color:
                isActive ? ColorConfig.app_main : ColorConfig.subtitle_text));
  } else {
    return Text("我的",
        style: TextStyle(
            fontSize: 11,
            color:
                isActive ? ColorConfig.app_main : ColorConfig.subtitle_text));
  }
}

Widget _getBarIcon(int index, bool isActive) {
  String path = '';
  if (index == 0) {
    path = !isActive ? "assets/images/1@2x.png" : 'assets/images/1@2x(1).png';
  } else if (index == 1) {
    path = !isActive ? "assets/images/2@2x.png" : 'assets/images/2@2x(1).png';
  } else if (index == 2) {
    path = !isActive ? "assets/images/3@2x.png" : 'assets/images/3@2x(1).png';
  } else if (index == 3) {
    path = isActive ? "assets/images/5@2x.png" : 'assets/images/5@2x(1).png';
  } else {
    path = !isActive ? "assets/images/4@2x.png" : 'assets/images/4@2x(1).png';
  }
  return Image.asset(
    path,
    width: 20,
    height: 20,
    excludeFromSemantics: true,
    gaplessPlayback: true,
  );
}

class HomeBottomBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;
  const HomeBottomBar(
    this.currentIndex,
    this.onTap,
  );

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 45,
      child: BottomBar(
        currentIndex: currentIndex,
        height: 45,
        onTap: onTap,
        items: List<BottomBarItem>.generate(
          5,
          (index) => BottomBarItem(
            icon: _getBarIcon(index, false),
            title: _getBarText(index, false),
            activeTitle: _getBarText(index, true),
            activeIcon: _getBarIcon(index, true),
          ),
        ),
      ),
    );
  }
}

class BottomBar extends StatefulWidget {
  final List<BottomBarItem> items;
  final int currentIndex;
  final double height;

  final ValueChanged<int> onTap;

  const BottomBar({
    required this.items,
    this.currentIndex = 0,
    required this.height,
    required this.onTap,
  });

  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  @override
  Widget build(BuildContext context) {
    final List<Widget> children = <Widget>[];
    for (int i = 0; i < widget.items.length; i++) {
      children.add(_createItem(i));
    }

    return SizedBox(
      height: widget.height,
      width: 1.sw,
      child: Stack(
        children: [
          //背景
          Positioned.fill(
            bottom: 0,
            top: 0,
            left: 0,
            right: 0,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Container(
                  color: ColorConfig.bg_color,
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            top: 0,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: children,
            ),
          ),
          // Positioned(
          //   top: 0,
          //   left: 0,
          //   right: 0,
          //   height: .5,
          //   child: Container(
          //     height: .1,
          //     width: 1.sw,
          //     color: ColorConfig.diver_color.withAlpha(1),
          //   ),
          // ),
        ],
      ),
    );
  }

  Widget _createItem(int i) {
    final BottomBarItem item = widget.items[i];
    final bool selected = i == widget.currentIndex;
    return Expanded(
        child: SizedBox(
      height: widget.height,
      child: InkResponse(
        onTap: () async {
          widget.onTap(i);
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              if (selected) item.activeIcon else item.icon,
              const SizedBox(height: 2),
              if (selected) item.activeTitle else item.title,
            ],
          ),
        ),
      ),
    ));
  }
}

class BottomBarItem {
  final Widget icon;
  final Widget activeIcon;
  final Widget title;
  final Widget activeTitle;

  BottomBarItem(
      {required this.icon,
      required this.title,
      required this.activeIcon,
      required this.activeTitle});
}
